<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <!--SEO搜索引擎优化-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,在线销售家电、数码、电脑、服装、母婴、图书、食品等数万个品牌商品.便捷、诚信的服务,为您提供愉悦的网上商城购物体验! ">
    <meta name="Keywords" content="网上购物,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">

    <title>专业网上购物京东商城!-品质保证</title>

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="jd_viewport">
    <!--顶部-->
    <div class="jd_header">
        <div class="jd_topbar">
            <div class="icon_logo"></div>
            <form action="">
                <span class="icon_search"></span>
                <!--search主要是在弹出键盘右下角的键变成"搜索"-->
                <input type="search" placeholder="搜索占位文字">
            </form>
            <a href="" class="jd_login">登陆</a>
        </div>

    </div>
    <!--焦点图-->
    <div class="jd_banner">
        <ul class="clearfix">
            <!--"javascript:;"是a标签受到点击的时候优先执行js-->
            <li><a href="javascript:;"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l5.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l6.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l7.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/l1.jpg" alt=""></a></li>
        </ul>
        <ol class="clearfix">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--分类导航-->
    <div class="jd_categories">
        <ul class="clearfix">
            <li>
                <a href="">
                    <img src="images/nav1.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav2.png" alt="">
                    <p>全球购</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav3.png" alt="">
                    <p>服装城</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav4.png" alt="">
                    <p>京东生鲜</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav5.png" alt="">
                    <p>京东到家</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav6.png" alt="">
                    <p>充值缴费</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav7.png" alt="">
                    <p>领豆豆</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav8.png" alt="">
                    <p>领券</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav9.png" alt="">
                    <p>物流查询</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/nav10.png" alt="">
                    <p>惠赚钱</p>
                </a>
            </li>
        </ul>
    </div>
    <!--产品中心-->
    <div class="jd_main">
        <!--秒杀类产品-->
        <div class="jd_seckill">
            <div class="seckill_header">
                <a href="" class="seckill_header_left">
                    <img src="images/seckill-icon.png" alt="" class="seckill_img">
                    <strong><em>8</em>点场</strong>
                    <div class="seckill_timer">
                        <div class="time">
                            <span>0</span>
                            <span>0</span>
                        </div>
                        <span class="colon">:</span>
                        <div class="time">
                            <span>0</span>
                            <span>0</span>
                        </div>
                        <span class="colon">:</span>
                        <div class="time">
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                </a>
                <a href="" class="seckill_header_right">更多</a>
            </div>
            <div class="seckill_con">
                <ul class="clearfix">
                    <li>
                        <a href=""><img src="images/detail01.jpg" alt=""></a>
                        <strong>&yen;1999</strong>
                        <span>&yen;12099</span>
                    </li>
                    <li>
                        <a href=""><img src="images/detail02.jpg" alt=""></a>
                        <strong>&yen;999</strong>
                        <span>&yen;1099</span>
                    </li>
                    <li>
                        <a href=""><img src="images/detail03.jpg" alt=""></a>
                        <strong>&yen;999</strong>
                        <span>&yen;1099</span>
                    </li>
                </ul>
            </div>
        </div>

        <!--主题类,一堆-->
        <section class="jd_products">
            <div class="section_header"><h3>京东乐购</h3></div>
            <div class="section_con">
                <ul class="clearfix">
                    <li class="float_l half_w border_r"><a href=""><img src="images/cp1.jpg" alt=""></a></li>
                    <li class="float_r half_w border_b"><a href=""><img src="images/cp2.jpg" alt=""></a></li>
                    <li class="float_r half_w"><a href=""><img src="images/cp3.jpg" alt=""></a></li>
                </ul>
            </div>
        </section>

        <section class="jd_products">
            <div class="section_header"><h3>京东超市</h3></div>
            <div class="section_con">
                <ul class="clearfix">
                    <li class="float_r half_w border_l"><a href=""><img src="images/cp4.jpg" alt=""></a></li>
                    <li class="float_l half_w border_b"><a href=""><img src="images/cp5.jpg" alt=""></a></li>
                    <li class="float_l half_w"><a href=""><img src="images/cp6.jpg" alt=""></a></li>
                </ul>
            </div>
        </section>

        <section class="jd_products">
            <div class="section_header"><h3>爱生活</h3></div>
            <div class="section_con">
                <ul class="clearfix">
                    <li class="float_l half_w border_r"><a href=""><img src="images/cp1.jpg" alt=""></a></li>
                    <li class="float_r half_w border_b"><a href=""><img src="images/cp2.jpg" alt=""></a></li>
                    <li class="float_r half_w"><a href=""><img src="images/cp3.jpg" alt=""></a></li>
                </ul>
            </div>
        </section>

        <!--推荐类-->
        <div class="jd_recommend">
            <!--标题图片大小13*13-->
            <div class="recommend_header">
                <span class="header_span">
                    <span class="arrow_img"></span>
                    为您推荐
                </span>
            </div>
            <div class="recommend_con">
                <ul class="clearfix">
                    <li>
                        <a href="">
                            <img src="images/intro1.jpg" alt="">
                            <span>这里是写产这里是写产品的描述内容这里是写产品的描述内容这里是写产品的描述内容这里是写产品的描述内容品的描述内容</span>
                        </a>
                        <div class="recommend_con_bottom">
                            <strong class="pro_price">&yen;999</strong>
                            <a href="" class="find_like" role="button">找相似</a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/intro2.jpg" alt="">
                            <span>这里是写产这里是写产品的描述内容这里是写产品的描述品的描述内容</span>
                        </a>
                        <div class="recommend_con_bottom">
                            <strong class="pro_price">&yen;999</strong>
                            <a href="" class="find_like" role="button">找相似</a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/intro3.jpg" alt="">
                            <span>这里是写产品的描述内容</span>
                        </a>
                        <div class="recommend_con_bottom">
                            <strong class="pro_price">&yen;999</strong>
                            <a href="" class="find_like" role="button">找相似</a>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/intro4.jpg" alt="">
                            <span>这里是写产品的描述内容</span>
                        </a>
                        <div class="recommend_con_bottom">
                            <strong class="pro_price">&yen;999</strong>
                            <a href="" class="find_like" role="button">找相似</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!--tabBar-->
    <div class="jd_footer">
        <ul class="clearfix">
            <li><a href="#"><img src="images/a-home.png" alt=""></a></li>
            <li><a href="category.html"><img src="images/n-catergry.png" alt=""></a></li>
            <li><a href="find.html"><img src="images/n-find.png" alt=""></a></li>
            <li><a href="cart.html"><img src="images/n-cart.png" alt=""></a></li>
            <li><a href=""><img src="images/n-me.png" alt=""></a></li>
        </ul>
    </div>
</div>


<script src="js/base.js"></script>
<script src="js/index.js"></script>
</body>
</html>